<!--
 * @description: 订单评价页面
 * @Author: @reynold
 * @Date: 2025-03-25 11:37:08
 * @Version: V2.0.0
-->
<template>
    <div class="rate-page">
      <van-nav-bar
        title="评价订单"
        left-text="返回"
        left-arrow
        @click-left="$router.go(-1)"
      />
      
      <div class="order-info-card">
        <div class="header">
          <span class="order-number">订单编号: {{ orderInfo.orderId }}</span>
          <van-tag :type="getStatusType(orderInfo.status)">{{ orderInfo.status }}</van-tag>
        </div>
        
        <div class="time-info">
          <div>创建时间: {{ orderInfo.createTime }}</div>
          <div v-if="orderInfo.resTime">完成时间: {{ orderInfo.resTime }}</div>
        </div>
        
        <van-divider class="custom-divider">服务项目</van-divider>
        
        <div class="products-list">
          <div v-for="(product, index) in orderInfo.produts" :key="product.id" class="product-item">
            <div class="product-index">{{ index + 1 }}.</div>
            <van-image  width="60"  height="60"  :src="product.imgUrl"  fit="cover"  radius="4"/>
            <div class="product-detail">
              <div class="name">{{ product.name }}</div>
              <div class="desc">{{ product.description }}</div>
              <div class="price">￥{{ (product.price).toFixed(2) }} × {{ product.currentNum }}</div>
            </div>
          </div>
        </div>
        
        <div class="total-section">
          <span>合计:</span>
          <span class="total-price">￥{{ (orderInfo.totolPrice / 100).toFixed(2) }}</span>
        </div>
      </div>
      
      <div class="rate-content">
        <div class="section-title">服务评价</div>
        
        <div class="rate-item">
          <div class="rate-label">服务满意度</div>
          <van-rate  v-model="rateData.serviceRate"  :size="22"  color="#ffd21e"  void-icon="star"  void-color="#eee"/>
          <span class="rate-text">{{ rateTexts[rateData.serviceRate - 1] }}</span>
        </div>
        
        <div class="rate-item">
          <div class="rate-label">服务专业度</div>
          <van-rate  v-model="rateData.professionalRate"  :size="22"  color="#ffd21e"  void-icon="star"  void-color="#eee"/>
          <span class="rate-text">{{ rateTexts[rateData.professionalRate - 1] }}</span>
        </div>
        
        <div class="rate-item">
          <div class="rate-label">服务时效性</div>
          <van-rate  v-model="rateData.timeRate"  :size="22"  color="#ffd21e"  void-icon="star"  void-color="#eee"/>
          <span class="rate-text">{{ rateTexts[rateData.timeRate - 1] }}</span>
        </div>
        
        <van-field
          v-model="rateData.comment"
          rows="4"
          autosize
          type="textarea"
          maxlength="300"
          placeholder="请描述您的服务体验，您的评价会帮助我们提升服务质量..."
          show-word-limit
          class="comment-field"
        />
        
        <div class="upload-section">
          <div class="upload-title">上传图片(最多6张)</div>
          <div class="upload-tips">上传服务完成后的照片，帮助其他用户了解服务效果</div>
          <van-uploader
            v-model="rateData.images"
            multiple
            :max-count="6"
            :after-read="afterRead"
            :before-delete="beforeDelete"
            upload-icon="plus"
            upload-text="添加图片"
          />
        </div>
        
        <div class="anonymous-rate">
          <van-checkbox v-model="rateData.isAnonymous" shape="square">匿名评价</van-checkbox>
        </div>
      </div>
      
      <div class="submit-section">
        <van-button  round  block  type="primary"  @click="submitRate"  :loading="submitting"  :disabled="submitting"  class="submit-btn">
        {{ submitting ? '提交中...' : '提交评价' }}
        </van-button>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        orderId: null,
        orderInfo: {},
        rateData: {
          serviceRate: 5,
          professionalRate: 5,
          timeRate: 5,
          comment: '',
          images: [],
          isAnonymous: false
        },
        rateTexts: ['非常差', '差', '一般', '好', '非常好'],
        submitting: false
      }
    },
    created() {
      this.orderId = this.$route.params.id
      this.getOrderInfo()
    },
    methods: {
      getOrderInfo() {
        const orderList = JSON.parse(localStorage.getItem('mock_orderList'));
        this.orderInfo = orderList.find(item => item.orderId == this.orderId);
        // 如果找不到订单，提示并返回
        const hasOrderId = !this.orderInfo.orderId;
        if (hasOrderId) {
          this.$toast.fail('订单信息获取失败')
          this.$router.go(-1);
        }
      },
      
      getStatusType(status) {
        switch(status) {
          case '待付款': return 'danger'
          case '待服务': return 'warning'
          case '已完成': return 'success'
          default: return 'default'
        }
      },
      
      afterRead(file) {
        // 上传过程
        file.status = 'uploading'
        file.message = '上传中...'
        setTimeout(() => {
          file.status = 'done'
          file.message = '上传成功'
        }, 1000)
      },
      
      beforeDelete(_file, detail) {
        this.$dialog.confirm({
          title: '删除图片',
          message: '确定要删除这张图片吗？'
        }).then(() => {
          this.rateData.images.splice(detail.index, 1)
        })
        return false
      },
      
      submitRate() {
        if (this.submitting) return
        // 简单验证
        if (this.rateData.serviceRate === 0 || this.rateData.professionalRate === 0 || this.rateData.timeRate === 0) {
          this.$toast.fail('请为服务评分')
          return
        }
        this.submitting = true
        // 模拟API请求
        setTimeout(() => {
          // 更新订单评价状态
          let orderList = JSON.parse(localStorage.getItem('mock_orderList'))
          const index = orderList.findIndex(item => item.orderId == this.orderId)
          if (index !== -1) {
            // 添加评价信息
            orderList[index].rating = {
              ...this.rateData,
              rateTime: new Date().toLocaleString(),
              averageRate: ((this.rateData.serviceRate + this.rateData.professionalRate + this.rateData.timeRate) / 3).toFixed(1)
            }
            localStorage.setItem('mock_orderList', JSON.stringify(orderList))
            this.$toast.success({
              message: '评价成功',
              onClose: () => {
                this.$router.go(-1)
              }
            })
          } else {
            this.$toast.fail('订单不存在')
          }
          this.submitting = false
        }, 1500)
      }
    }
  }
  </script>
  <style scoped>
  .rate-page {
    padding: 0 12px 80px;
    background-color: #f7f8fa;
  }
  .order-info-card {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-top: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .order-number {
    flex: 1;
    font-size: 15px;
    font-weight: 500;
    color: #333;
  }
  .time-info {
    font-size: 12px;
    color: #999;
    line-height: 1.6;
    margin-bottom: 10px;
  }
  .custom-divider {
    margin: 12px 0;
    color: #969799;
    font-size: 13px;
  }
  .products-list {
    margin-bottom: 10px;
  }
  .product-item {
    display: flex;
    padding: 8px 0;
    border-bottom: 1px dashed #f0f0f0;
  }
  .product-item:last-child {
    border-bottom: none;
  }
  .product-index {
    width: 20px;
    font-size: 14px;
    color: #999;
    display: flex;
    align-items: center;
  }
  .product-detail {
    flex: 1;
    margin-left: 10px;
  }
  .product-detail .name {
    font-size: 14px;
    margin-bottom: 4px;
    color: #333;
  }
  .product-detail .desc {
    font-size: 12px;
    color: #999;
    margin-bottom: 4px;
    overflow: hidden;
  }
  .product-detail .price {
    font-size: 13px;
    color: #ee0a24;
  }
  .total-section {
    text-align: right;
    font-size: 15px;
    padding-top: 10px;
    border-top: 1px solid #f5f5f5;
  }
  .total-price {
    font-weight: bold;
    color: #ee0a24;
    margin-left: 5px;
  }
  .rate-content {
    background: #fff;
    border-radius: 8px;
    padding: 15px;
    margin-top: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }
  .section-title {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 15px;
    color: #333;
  }
  .rate-item {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }
  .rate-label {
    width: 80px;
    font-size: 14px;
    color: #333;
  }
  .rate-text {
    margin-left: 10px;
    font-size: 13px;
    color: #ee0a24;
  }
  .comment-field {
    background: #fafafa;
    border-radius: 6px;
    margin-bottom: 15px;
  }
  .upload-section {
    margin-top: 20px;
  }
  .upload-title {
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
  }
  .upload-tips {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
  }
  .anonymous-rate {
    margin-top: 20px;
  }
  .submit-section {
    position: fixed;
    bottom: 20px;
    left: 12px;
    right: 12px;
  }
  .submit-btn {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  }
  </style>